<!-- 使用键盘操作时, 如果是处于焦点则自动弹出详情框 -->
<template>
  <div style="height:100%; display: flex; gap: 1px; align-items: center;">
    <el-tooltip placement="bottom" effect="light" trigger="click">
      <template #content>
        <el-descriptions title="创建详情" :column="2" border>
          <el-descriptions-item>
            <template #label>
              <div>
                <el-icon>
                  <Timer />
                </el-icon>
                创建时间
              </div>
            </template>
            {{ props.params.value?.createTime }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div>
                <el-icon>
                  <User />
                </el-icon>
                创建用户
              </div>
            </template>
            {{ props.params.value?.createUser }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div>
                <el-icon>
                  <Timer />
                </el-icon>
                更新时间
              </div>
            </template>
            {{ props.params.value?.updateTime }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div>
                <el-icon>
                  <User />
                </el-icon>
                更新用户
              </div>
            </template>
            {{ props.params.value?.updateUser }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div>
                <el-icon>
                  <Timer />
                </el-icon>
                状态
              </div>
            </template>
            {{ props.params.value?.status }}
          </el-descriptions-item>
        </el-descriptions>
      </template>

      <el-text>
        <el-icon>
          <InfoFilled />
        </el-icon>
        详情
      </el-text>
    </el-tooltip>
  </div>
</template>

<script setup lang='ts'>
import type { ICellRendererParams } from 'ag-grid-enterprise'
import type { IOlympicData } from '@/views/types'

const props = defineProps<{
  params: ICellRendererParams<IOlympicData, IOlympicData["detail"]>
}>()
</script>

<style scoped></style>
